<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./prop-types.js"></script>

<script type="text/babel">

  //#region
    /*
      高阶函数： 如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数
        1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
        2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数

        常见的高阶函数： promise, setTimeOut, arr.map 等等

      函数柯里化： 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理函数的编码形式
    
    */

  //#endregion

  class Login extends React.Component{
    state = {
      username: '',
      password: ''
    }

    // 保存用户名和密码到状态中
    saveFormData = (dataType)=>{
      console.log(dataType)
      return (event)=>{
        console.log(dataType, event.target.value)
        this.setState({[dataType]: event.target.value})
      }
      
    }


    handleSubmit = (event)=>{
      event.preventDefault() // 阻止表单提交
      const {username, password} = this.state
      alert(`你输入的用户名是：${username}, 你输入的密码是：${password}`)
    }
    render(){
      return (
        <form onSubmit={this.handleSubmit}>
          用户名：<input onChange={this.saveFormData('username')} type="text" name="username" />
          密码：<input onChange={this.saveFormData('password')} type="password" name="password" />
          <button>登录</button>
          </form>
      )
    }
  }

ReactDOM.render(<Login />, document.getElementById('root'))
</script>
</html>
